<template>
    <admin-view>
        <admin-section>
            <admin-card>
                <el-row>
                    <el-col :span="16">
                        <div class="table">
                            <h4>基本信息</h4>
                            <div class="editable">
                                <el-form
                                        label-position="right"
                                        label-width="120px"
                                        size="medium"
                                        :model="data"
                                        :rules="rules"
                                        ref="editor"
                                >
                                    <el-form-item
                                            label="流水号"
                                            prop="withdraw_id">
                                        {{data.withdraw_id}}
                                    </el-form-item>
                                    <el-form-item
                                            label="粉丝站"
                                            prop="club_name">
                                        {{data.club_name}}
                                    </el-form-item>
                                    <el-form-item
                                            label="名称"
                                            prop="name">
                                        {{data.name}}
                                    </el-form-item>
                                    <el-form-item
                                            label="真实姓名"
                                            prop="real_name">
                                        {{data.real_name}}
                                    </el-form-item>
                                    <el-form-item
                                            label="提现金额"
                                            prop="real_name">
                                        {{data.amount | Money}}
                                    </el-form-item>
                                    <el-form-item
                                            label="手续费"
                                            prop="fee">
                                        {{data.fee | Money}}
                                    </el-form-item>
                                    <el-form-item
                                            label="支付宝流水号"
                                            prop="trade_no">
                                        <el-input v-model="data.trade_no" placeholder="2018083121001004330535087321"></el-input>
                                    </el-form-item>
                                    <el-form-item
                                            label="打款金额"
                                            prop="withdraw_amount">
                                        <el-input class="ni" v-model="data.withdraw_amount" ></el-input>
                                        <span class="su">元</span>
                                    </el-form-item>
                                    <el-form-item
                                            label="打款手续费"
                                            prop="withdraw_fee">
                                        <el-input class="ni" v-model="data.withdraw_fee" ></el-input>
                                        <span class="su">元</span>
                                    </el-form-item>

                                    <el-form-item>
                                        <el-button
                                                @click="onSubmit"
                                                type="success"
                                                :loading="loading">通过
                                        </el-button>
                                        <el-button
                                                @click="onCancel"
                                                type="danger"
                                                :loading="loading">拒绝
                                        </el-button>
                                    </el-form-item>
                                </el-form>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="8">
                    </el-col>
                </el-row>
            </admin-card>
        </admin-section>
    </admin-view>
</template>

<script lang="ts">

    import {AdminView,AdminCard,AdminLabel,AdminSection} from '@/views/layout'
    import {Vue,Component} from 'vue-property-decorator'
    import {Api} from '@/api/capital'
    import Filter from '@/libs/filter'
    import AdminSearchEdit from '@/views/controls/AdminSearchEdit.vue'


    @Component({
        name:"AdminWithdrawApplyView",
        components: {
            AdminView,
            AdminCard,
            AdminSection,
            AdminSearchEdit
        },
        filters: Filter
    })
    export default class AdminWithdrawApplyView extends Vue{

        status:any = "全部";
        applyStatus = [
            "未提交",
            "待审核",
            "审核通过",
            "审核拒绝",
            "不存在",
        ];

        data:Api.Capital.GetWithdrawApplyResponse = {
            amount:0,
            account:0,
            create_time:"",
            status:0,
            withdraw_id:"",
            club_id:"",
            uid:"",
            name:"",
            real_name:"",
            club_name:"",
            fee:0,
            withdraw_fee:0,
            withdraw_amount:0,
            trade_no:"",
        };


        page:number = 0;



        loading:boolean = false;
        rules = {
            withdraw_amount:[{validator:(rule, value, callback, source, options) => {


                if(!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9](0-9)?$)/.test(value)) {
                    callback(new Error("请输入正确的打款金额"))
                    return
                }

                console.log(value*100, this.data.amount)
                if(value*100 > this.data.amount) {
                    callback(new Error("打款金额大于提现金额"))
                    return
                }
                callback()
            }}],
            withdraw_fee:[{validator:(rule, value, callback, source, options) => {

                    console.log("xxx")
                    if(!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9](0-9)?$)/.test(value)) {
                        callback(new Error("请输入正确的打款费率"))
                        return
                    }
                    callback()
                }}],
        };

        loadRules() {
            this.rules = {
                withdraw_amount:[{validator:(rule, value, callback, source, options) => {


                        if(!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9](0-9)?$)/.test(value)) {
                            callback(new Error("请输入正确的打款金额"))
                            return
                        }

                        console.log(value*100, this.data.amount)
                        if(value*100 > this.data.amount) {
                            callback(new Error("打款金额大于提现金额"))
                            return
                        }
                        callback()
                    }}],
                withdraw_fee:[{validator:(rule, value, callback, source, options) => {

                        console.log("xxx")
                        if(!/(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9](0-9)?$)/.test(value)) {
                            callback(new Error("请输入正确的打款费率"))
                            return
                        }
                        callback()
                    }}],
            };
        }




        loadView() {

            var id:any = this.$route.params['id'];

            console.log("id",id)

            Api.Capital.GetWithdrawApply({id:id})
                .then((ack) => {
                    console.log(ack);

                    this.data = ack;
                    this.data.withdraw_amount = (this.data.amount / 100 ).toFixed(2);

                    let fee = this.data.amount * 0.015;

                    if(fee < 200){
                        fee = 200;
                    }

                    if (fee > 2500) {
                        fee = 2500
                    }

                    this.data.withdraw_fee = (fee/100).toFixed(2);


                    this.loadRules();
                })
        }


        onStatusChange() {
            this.loadView()
        }

        onSubmit() {
            let editor:any = this.$refs['editor'];

            editor.validate((valid:boolean) => {

                if(valid){

                    let ask:Api.Capital.SetWithdrawApplyRequest = {
                        withdraw_id:this.data.withdraw_id,
                        amount:this.data.withdraw_amount * 100,
                        fee:this.data.withdraw_fee*100,
                        trade_no:this.data.trade_no,
                        allow:true,
                    };

                    this.loading = true;
                    Api.Capital.SetWithdrawApply(ask)
                        .then((ack) => {
                            this.loading = false;
                            this.$message({
                                type:"success",
                                message:`提交成功.`
                            });

                            this.$router.push({
                                path:'/apply/withdraw'
                            })

                        })
                        .catch(()=>{
                            this.loading = false;
                        })
                }
            })
        }

        onCancel() {

            Api.Capital.SetWithdrawApply({
                withdraw_id:this.data.withdraw_id,
                trade_no:"",
                amount:0,
                fee:0,
                allow:false,
            }).then((ack) => {
                this.$message({
                    type:"success",
                    message:`提交成功.`
                });

                this.$router.push({
                    path:'/apply/withdraw'
                })
            });
        }
        mounted() {
            this.loadView()
        }
    }


</script>

<style lang="scss" scoped>

    .ni {
        width: 200px;
    }

    .su {
        padding-left: 10px;
        font-size: 8px;
        color: #909399;
    }

    .table {
        padding: 10px;
    }

    .foot {
        padding-top: 10px;
    }

    .card {
        padding: 10px;
        border-left: 1px solid #E4E7ED;
    }

    .card-img {
        border: 1px solid #E4E7ED;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            height: 100%;
        }
    }

    .avatar {

        padding-top: 2px;
        padding-bottom: 2px;
        padding-right: 4px;
        img {
            position: relative;
            display: inline-block;
            width:36px;
            height:36px;
            /*圆形显示*/
            border-radius: 50%;
            /*圆形显示*/
            background: rgba(255,255,255,0.1);
            vertical-align: center;
        }
    }
</style>